<template>
  <div class="tabbar">
     <ul>
        <li 
            v-for="(item,index) in tabList" :key="index"
            @click="jump(index, item.path)"
        >
            <img :src='currentIndex == index ? item.selected : item.imgurl' alt="">
            <span :class='{active : currentIndex == index}'>{{item.text}}</span>
        </li>

    </ul>
  </div>
</template>

<script>
export default {
     data(){
        return{
            currentIndex:0,
            tabList:[
                {
                    imgurl:'images/home.png',
                    selected:'images/home-select.png',
                    text:'首页',
                    path:"/home"
                },
                {
                    imgurl:'images/list.png',
                    selected:'images/list-select.png',
                    text:'爆爆团',
                    path:"/tuan"

                },
                {
                    imgurl:'images/cart.png',
                    selected:'images/cart-select.png',
                    text:'订单',
                    path:"/order"

                },
                {
                    imgurl:'images/my.png',
                    selected:'images/my-select.png',
                    text:'我的',
                    path:"/mine"

                }
            ],
        }
    },
    methods:{
        jump(index,path){
            this.currentIndex = index,
            this.$router.push(path)
        }
    }
}
</script>

<style lang="scss" scoped>
ul{
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ccc;
    
    li{
        // background: blue;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        img{
            width: 30px;
        }
        span{
            font-size: 14px;
        }
    }
}
.active{
    color: red;
}
</style>